<template>
	<view>
		<u-grid :col="3" :border="false" @click="toNav">
			<u-grid-item name="1">
				<u-badge :value="msgNum.thumb_collect" max="99" :absolute="true" :offset="[0, 30]"></u-badge>
				<image class="nav-icon" src="/static/images/icon/souc.png"></image>
				<view class="grid-text">赞和收藏</view>
			</u-grid-item>
			<u-grid-item name="2">
				<u-badge :value="msgNum.follow" max="99" :absolute="true" :offset="[0, 30]"></u-badge>
				<image class="nav-icon" src="/static/images/icon/gz.png"></image>
				<view class="grid-text">新增关注</view>
			</u-grid-item>
			<u-grid-item name="3">
				<u-badge :value="msgNum.comment" max="99" :absolute="true" :offset="[0, 30]"></u-badge>
				<image class="nav-icon" src="/static/images/icon/pl.png"></image>
				<view class="grid-text">评论</view>
			</u-grid-item>
		</u-grid>
		<view class="msg-wrap">
			<view class="title">
				<view class="left">通知</view>
			</view>
			<!-- 图文消息 -->
			<block v-if="msgNum.article_msg_list.length > 0">
				<navigator @longpress="onPressArticle(item.id, index)" :url="'/pages/webview?src=' + item.content"
					class="msg-item" v-for="(item, index) in msgNum.article_msg_list" :key="index"
					@click="articleMsgState(item.id)">
					<view class="avatar-box">
						<u-badge v-if="item.status == 0" :is-dot="true" :offset="[0, 0]" type="error"
							absolute></u-badge>
						<image class="avatar" mode="aspectFill" :src="item.userInfo.avatar"></image>
					</view>
					<view class="right">
						<view>
							<text style="margin-right: 10rpx;">{{ item.userInfo.nickname }}</text>
							<view class="official-tag" v-if="item.tag">{{item.tag}}</view>
						</view>
						<view class="desc">
							<text>{{ item.title }}</text>
							<text class="time">{{ item.create_time | timeFrom }}</text>
						</view>
					</view>
				</navigator>
			</block>
			<!-- 通知消息 -->
			<block v-if="msgNum.post_notice.length > 0">
				<navigator @longpress="onPressChat(item.user_info.id, index)" class="msg-item"
					:url="'notice?user='+JSON.stringify(item.user_info)" v-for="(item, index) in msgNum.post_notice"
					:key="index">
					<view class="avatar-box">
						<u-badge max="99" :value="item.count" :offset="[5, 0]" type="error" absolute></u-badge>
						<image class="avatar" mode="aspectFill" :src="item.user_info.avatar"></image>
					</view>
					<view class="right">
						<view>
							<text style="margin-right: 10rpx;">{{ item.user_info.nickname }}</text>
						</view>
						<view class="desc">
							<text>{{ item.msg.content |replace}}</text>
							<text class="time">{{ item.msg.create_time | timeFrom }}</text>
						</view>
					</view>
				</navigator>
			</block>
			<block v-if="msgNum.post_notice.length == 0 && msgNum.article_msg_list.length == 0">
				<view class="msg-empty">
					<image class="img" mode="widthFix" src="/static/empty.png"></image>
					<text class="txt">暂无新消息</text>
				</view>
			</block>
		</view>
		<!-- 删除图文消息弹窗 -->
		<u-modal :show="showSheet" title="提示" content='是否删除该消息,删除后将无法恢复!' :closeOnClickOverlay="true"
			:showCancelButton="true" @confirm="onSheetItem" @close="showSheet = false"
			@cancel="showSheet = false"></u-modal>
		<!-- 删除私信消息弹窗 -->
		<u-modal :show="showChatSheet" title="提示" content='是否删除该消息,删除后将无法恢复!' :closeOnClickOverlay="true"
			:showCancelButton="true" @confirm="onSheeChat" @close="showChatSheet = false"
			@cancel="showChatSheet = false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSheet: false,
				showChatSheet: false,
				sheetList: [{
					name: '删除',
					color: 'red'
				}],
				msgNum: {
					thumb_collect: 0,
					follow: 0,
					comment: 0,
					article_msg_list: [],
					post_notice: []
				},
				checkedMsgId: '',
				checkedIndex: '',
				checkedMsgUid: ''
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onShow() {
			if (this.userInfo && this.userInfo.id) {
				this.getMsgNum();
			}
		},
		filters: {
			replace(str) {
				return str.replace(/<.*?>/g, "")
			}
		},
		methods: {
			// 更新阅读状态
			articleMsgState(id) {
				this.$H.post('message/articleMsgState', {
					post_id: id
				});
			},
			// 长按图文消息
			onPressArticle(id, index) {
				this.showSheet = true;
				this.checkedMsgId = id;
				this.checkedIndex = index;
			},
			// 长按通知消息
			onPressChat(uid, index) {
				this.showChatSheet = true;
				this.checkedIndex = index;
				this.checkedMsgUid = uid;
			},
			// 删除图文消息
			onSheetItem() {
				this.$H.post('message/delMsg', {
					id: this.checkedMsgId
				}).then(res => {
					if (res.code == 1) {
						this.msgNum.article_msg_list.splice(this.checkedIndex, 1);
						this.showSheet = false;
					}
				});
			},
			// 删除私信消息
			onSheeChat() {
				this.$H.post('message/delChat', {
					user_id: this.checkedMsgUid
				}).then(res => {
					if (res.code == 1) {
						this.msgNum.post_notice.splice(this.checkedIndex, 1);
						this.showChatSheet = false;
					}
				});
			},
			getMsgNum() {
				this.$H.post('message/num').then(res => {
					this.msgNum = res.result;
					let messageNum = res.result.all_count
					if (messageNum > 0) {
						uni.setTabBarBadge({
							index: 1,
							text: messageNum + ''
						})
					} else {
						uni.removeTabBarBadge({
							index: 1
						})
					}
				});
			},
			toNav(e) {
				uni.navigateTo({
					url: '/pages/message/list?type=' + e
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.nav-icon {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
	}

	.msg-wrap {
		background-color: #ffffff;
		margin-top: 20rpx;

		.title {
			margin: 20rpx;
		}

		.msg-item {
			padding: 20rpx;
			display: flex;

			.avatar-box {
				position: relative;

				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				flex: 1;

				.desc {
					font-size: 26rpx;
					color: #616161;
					display: flex;

					.time {
						white-space: nowrap;
						margin-left: auto;
					}
				}
			}
		}
	}

	//
	.msg-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 800rpx;

		.img {
			width: 200rpx;
			margin-top: 100rpx;
		}

		.txt {
			color: #999;
			font-size: 20rpx;
			margin-top: 20rpx;
		}
	}

	.official-tag {
		display: inline-block;
		font-size: 24rpx;
		background-color: $themes-color;
		line-height: 1;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}
</style>